<script setup>
import { getAssetsImage } from '@/utils/tools';

const menus = [
  {
    name: '业务示例',
    children: [
      {
        name: '我的工时',
        icon: 'home_menu_item.png',
        link: '/example/working-hours/MyWorkingHours'
      },
      {
        name: '工时填报',
        icon: 'home_menu_item.png',
        link: '/example/working-hours/CommitWorkingHours'
      },
      {
        name: '出差请假',
        icon: 'home_menu_item.png',
        link: '/example/working-hours/CommitWorkingHours'
      },
      {
        name: '请假申请',
        icon: 'home_menu_item.png',
        link: '/example/vacate/VacationRequest'
      },
      {
        name: '配置管理',
        icon: 'home_menu_item.png',
        link: '/ED/CC/03'
      },
      {
        name: '页面管理',
        icon: 'home_menu_item.png',
        link: '/ED/FA/EDFA00'
      }
    ]
  }
];

const statisticsList = [
  {
    label: '当日产量',
    value: 4520,
    color: '#C85B64'
  },
  {
    label: '当月产量',
    value: 15520,
    color: '#259725'
  },
  {
    label: '当年产量',
    value: 452000,
    color: '#4280D0'
  }
];

const newsList = [
  {
    title: '陈德荣代表中国宝武与合资委签订年度轻业绩责任书',
    tag: ['冶金', '钢铁'],
    date: '2022-09-09',
    like: 613,
    image: 'news_img.png'
  },
  {
    title: '陈德荣代表中国宝武与合资委签订年度轻业绩责任书',
    tag: ['冶金', '钢铁'],
    date: '2022-09-09',
    like: 613,
    image: 'news_img.png'
  },
  {
    title: '陈德荣代表中国宝武与合资委签订年度轻业绩责任书',
    tag: ['冶金', '钢铁'],
    date: '2022-09-09',
    like: 613,
    image: 'news_img.png'
  },
  {
    title: '陈德荣代表中国宝武与合资委签订年度轻业绩责任书',
    tag: ['冶金', '钢铁'],
    date: '2022-09-09',
    like: 613,
    image: 'news_img.png'
  }
];
</script>
<template>
  <XPage title="首页" hide-header>
    <div class="home-page">
      <div class="home-container">
        <van-search
          class="search-column"
          placeholder="请输入搜索关键字"
          left-icon=" "
          right-icon="search"
          show-action
        >
          <template #action>
            <van-icon name="bulb-o" size="24" />
          </template>
        </van-search>
        <div class="data-overview">
          <div class="title-first">钢铁基地数据总览</div>
          <div class="title-second">全国2022年度</div>
        </div>
        <div v-for="(menu, moduleIndex) in menus" :key="moduleIndex" class="menu-list">
          <van-grid :border="false" class="menu-grid">
            <van-grid-item
              v-for="(item, appIndex) in menu.children"
              :key="appIndex"
              :text="item.name"
              :icon="getAssetsImage(item.icon)"
              :to="item.link"
            />
          </van-grid>
        </div>
        <div class="statistics-show">
          <div v-for="(item, index) in statisticsList" :key="index" class="statistics-item">
            <div :style="{ color: item.color }" class="statistics-value">{{ item.value }}</div>
            <div class="statistics-label">{{ item.label }}</div>
          </div>
        </div>

        <div class="news-card">
          <div class="news-card-title">
            <div class="news-title-txt">资讯</div>
            <div>
              更多
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="news-list">
            <div v-for="(item, newsIndex) in newsList" :key="newsIndex" class="news-item">
              <div id="test" class="news-left">
                <div class="news-title">{{ item.title }}</div>
                <div class="tag-list">
                  <div v-for="(str, tagIndex) in item.tag" :key="tagIndex" class="news-tag">
                    {{ str }}
                  </div>
                </div>
                <div class="news-lef-bottom">
                  <div class="news-date">{{ item.date }}</div>
                  <div class="news-like">
                    <van-icon name="like-o" />
                    {{ item.like }}
                  </div>
                </div>
              </div>
              <div class="news-right">
                <van-image :src="getAssetsImage(item.image)" width="100" height="72" fit="cover" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <XNavigation />
  </XPage>
</template>

<style lang="stylus" scoped>
.home-page
  height calc(100vh - var(--van-tabbar-height))
  overflow-y auto

  .home-container
    background-image url("@/assets/img/home_bg.png")
    background-repeat no-repeat
    background-position-y -20px
    background-size 100% auto

  .search-column
    padding 16px 0 16px 12px;
    background transparent

  .data-overview
    padding-top 54px
    padding-bottom 32px
    padding-left 24px

    .title-first
      font-family PingFangSC-Medium, "PingFang SC"
      font-size 20px
      font-weight 500
      color rgb(0 0 0 / 85%)

    .title-second
      font-family PingFangSC-Regular, "PingFang SC"
      font-size 16px
      font-weight 400
      color rgb(0 0 0 / 85%)

  .menu-list
    z-index 100
    padding 12px 12px 0
    overflow hidden

    &:first-child
      padding-top -148px

    .menu-title
      padding 12px
      color white
      text-align center
      background-color var(--primary-color)

    .menu-grid
      padding 8px
      background-color white

      :deep(.van-grid-item__content)
        padding 6px

  .statistics-show
    display flex
    justify-content center
    padding 16px
    margin 8px 12px
    background white

    .statistics-item
      flex 1
      margin auto
      text-align center

      .statistics-value
        font-family BarlowCondensed-Medium, BarlowCondensed
        font-size 24px
        font-weight 500

      .statistics-label
        margin-top 4px
        font-family PingFangSC-Regular, "PingFang SC"
        font-size 12px
        font-weight 400
        color rgb(0 0 0 / 85%)

  .news-card
    padding 12px
    margin 8px 12px 0
    background white

    .news-card-title
      display flex
      align-items center
      justify-content space-between
      padding 4px 0

      .news-title-txt
        font-family PingFangSC-Medium, "PingFang SC"
        font-size 20px
        font-weight 500
        color rgb(0 0 0 / 85%)

    .news-list

      .news-item
        display flex
        padding 8px 0

        &:not(:first-child)
          border-top 1px solid #ebedf0

        .news-left
          flex 1

          .news-title
            font-family PingFangSC-Medium, "PingFang SC"
            font-size 16px
            font-weight 500
            color rgb(0 0 0 / 85%)

          .tag-list
            display flex
            align-items center
            margin-top 4px

            .news-tag
              margin-right 8px;
              font-family PingFangSC-Regular, "PingFang SC"
              font-size 12px
              font-weight 400
              color var(--primary-color)

          .news-lef-bottom
            display flex
            align-items center
            margin-top 16px

            .news-date
              font-size 12px

            .news-like
              margin-left 12px
              font-size 12px

        .news-right
          width 100px
          padding-left 12px
</style>
